<template>

  <!-- 分配用户弹框 -->
  <div class="assigned-user">
    <el-dialog
      :close-on-click-modal="false"
      title="分配用户"
      :visible.sync="dialogVisible"
      width="700px"
    >
      <el-form ref="form" size="small" :model="form" inline @submit.native.prevent>
        <el-form-item prop="realName">
          <el-input v-model="form.realName" clearable :maxlength="100" placeholder="请输入用户名称/手机号" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searchBtn"> 查询 </el-button>
          <el-button @click="resetBtn"> 重置 </el-button>
        </el-form-item>
      </el-form>

      <el-row>
        <!-- 用户树列表 -->
        <el-col :span="24">
          <h3> 用户列表 </h3>
          <div v-loading="getUserLoading" class="selected-user">
            <el-checkbox-group v-model="checkListInPage">
              <p v-for="(item, index) in createUserIdListInPage" :key="index">
                <el-checkbox :label="item.userId" :disabled="item.userId === headUserId"> {{ item.realName }} / {{ item.phone }} </el-checkbox>
              </p>
            </el-checkbox-group>
          </div>
        </el-col>
      </el-row>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" :disabled="!canClick" :loading="!canClick" @click="assignUserCofirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { assignUserApi } from '@/api/systemManage'
import sysUserApi from '@/framework/api/userCenter/sysUser'
import _ from 'lodash' // 导入loadsh插件
export default {
  props: {
    createUserIdList: {
      type: Array,
      default: () => []
    },
    systemId: {
      type: String,
      default: ''
    },
    headUserId: {
      type: String,
      default: ''
    }
  },

  data () {
    return {
      canClick: true,
      dialogVisible: false,
      form: {
        realName: ''
      },
      createUserIdListInPage: [],
      checkListInPage: [],
      getUserLoading: false
    }
  },

  methods: {
    resetBtn () {
      this.$refs.form.resetFields()
      this.getCreateUserIdListInPage()
    },

    searchBtn () {
      if (!this.form.realName) {
        this.getCreateUserIdListInPage()
      }
      // this.createUserIdListInPage = this.createUserIdList.filter(item => {
      //   return (item.realName || '').indexOf(this.form.realName) !== -1 || (item.phone || '').indexOf(this.form.realName) !== -1
      // })
      const realNameOrPhone = !isNaN(this.form.realName)
      this.getUserLoading = true
      sysUserApi.fetchPage({
        organizationId: this.$store.getters.orgId,
        pageNo: 1,
        pageSize: -1,
        containSelf: true,
        phone: realNameOrPhone ? this.form.realName : '',
        realName: !realNameOrPhone ? this.form.realName : ''
      }).then(({ code, data }) => {
        if (code === '00000') {
          this.createUserIdListInPage = data.rows
        }
      }).finally(() => {
        this.getUserLoading = false
      })
    },

    getCreateUserIdListInPage () {
      this.createUserIdListInPage = _.cloneDeep(this.createUserIdList)
    },

    // 分配用户确定
    assignUserCofirm () {
      this.canClick = false
      assignUserApi({
        systemId: this.systemId,
        userIds: this.checkListInPage
      }).then(({ code, data }) => {
        if (code === '00000') {
          this.dialogVisible = false
          this.$message.success('分配用户成功')
        }
      }).finally(() => {
        this.canClick = true
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.assigned-user {
  ::v-deep .el-dialog__body {
    padding: 0 20px;

    .el-col {
      height: 400px;
      padding: 0 10px;

      // 选中的用户
      h3 {
        margin: 0 0 5px;
      }
      .selected-user {
        border: 1px solid #ccc;
        height: calc(100% - 30px);
        overflow-y: auto;
        padding: 10px;
        p {
          margin-bottom: 5px;
        }
      }
    }
  }
}

</style>
